<template>
  <div class="login">
    <div class="login_form">
      <div class="login_box">
        <p class="login_top">管理登陆</p>
        <div class="login_bottom">
          <div class="login_img">
            <img src="../assets/img/login_normal.png" class="normal" v-show="!inputFocus" alt="">
            <img src="../assets/img/login_greeting.png" class="greeting" v-show="inputFocus=='admin'" alt="">
            <img src="../assets/img/login_blindfold.png" class="blindfold" v-show="inputFocus=='pwd'" alt="">
          </div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" @submit.native.prevent label-width="80px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="admin">
              <el-input @focus="inputFocus='admin'" @blur="inputFocus=''" type="text" v-model="ruleForm.admin" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input @focus="inputFocus='pwd'" @blur="inputFocus=''" type="password" v-model="ruleForm.pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item class="submit_btn">
              <el-button type="primary" native-type="submit" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapActions, mapGetters, mapMutations } from "vuex";  //vuex得各个方法   mapGetters放在computed里面 之后可以在当前页面用 this.userInfo 使用这个全局变量
export default {
  name: "login",
  data() {
    return{
      inputFocus:'',
      ruleForm:{
        admin:'',
        pwd:''
      },
      rules: {      //element 表单规则校验 定义在date里 el-form :rules使用 具体官方文档
        admin: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
      }
    }
  },
  components: {
  },
  methods: {
    ...mapMutations({               //set 设置vuex变量得值  也可以用this.$store.commit('setToken','as')  这样设置 setToken需在store/index.js mutations里得定义
      setUserInfo: "setUserInfo",   //设置用户信息
      setToken: "setToken",         //设置token
      setTokenTime:"setTokenTime",  //设置token过期时间
      setLogin: "setLogin",         //设置登陆状态
    }),
    submitForm(formName) {
      //提交表单 
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.ruleForm.admin.indexOf('admin')!=-1 &&this.ruleForm.pwd.indexOf('root')!=-1){
            this.$message({
              message: '登陆成功',
              type: 'success'
            });
            this.setLogin(true);
            this.setToken('eyJhbGciOiJSUzI1NiIsImtpZCI6Ijg2NTU1MzFBMjA3ND');
            this.setTokenTime(36000 * 1000 + new Date().getTime());
            let opt={
              admin:this.ruleForm.admin,
              password:this.ruleForm.pwd
            }
            this.setUserInfo(opt);
            this.$router.push('/home')
          }else{
            this.$message.error('用户名或密码错误');
          }
        } else {
          //校验规则不通过 
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../assets/img/login_bg.jpg") repeat;
  // background: #000;
  .login_form{
    padding: 0 10px;
    height: 280px;
    background-color: #fff;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .login_box{
      height: 260px;
      padding: 0 50px;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 10px 0px rgba(139, 140, 140, 0.3);
      border-radius: 2px;
      .login_top{    
        width: 100%;
        text-align: center;
        height: 20px;
        line-height: 20px;
        margin: 20px 0;
        font-size: 18px;
          color: #d13119;
        cursor: pointer;
        font-weight: bold;

      }
      .login_bottom{
        margin-left: -20px;
        .submit_btn {
          ::v-deep .el-form-item__content{
            margin-left: 20px!important;
            text-align: center;
          }
        }
      }
    }
    .login_img{
      img{
        height: auto;
      }
      img{
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 1;
        width: 10rem;
      }
      .normal{
        transform: translate(-50%,-83%);
      }
      .greeting{
        transform: translate(-50%,-75.8%);
      }
      .blindfold{
        width: 8.6rem;
        transform: translate(-50%,-75%);
      }
    }
  }
}
</style>